<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="HTML DOMDOM(文档对象模型) DOM HTML 1. 改变HTML输出流 document.write()1document.write(&#39;HTML内容&#39;);    2. 改变HTML内容 .innerHTML &#x3D; &#39;&#39;1document.getElementById(id).innerHTML&#x3D;新的 HTML">
<meta property="og:type" content="article">
<meta property="og:title" content="前端&#x2F;JavaScript&#x2F;JavaScript&#x2F;参考手册学习&#x2F;HTML DOM 对象">
<meta property="og:url" content="http://yoursite.com/2020/04/15/%E5%89%8D%E7%AB%AF/JavaScript/JavaScript/%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C%E5%AD%A6%E4%B9%A0/HTML%20DOM%20%E5%AF%B9%E8%B1%A1/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="HTML DOMDOM(文档对象模型) DOM HTML 1. 改变HTML输出流 document.write()1document.write(&#39;HTML内容&#39;);    2. 改变HTML内容 .innerHTML &#x3D; &#39;&#39;1document.getElementById(id).innerHTML&#x3D;新的 HTML">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="c:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311165018574.png">
<meta property="og:image" content="c:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200310171446470.png">
<meta property="og:image" content="c:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311103003282.png">
<meta property="og:image" content="c:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311122817471.png">
<meta property="article:published_time" content="2020-04-15T01:47:24.442Z">
<meta property="article:modified_time" content="2020-06-26T07:26:23.573Z">
<meta property="article:author" content="heweiliang">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="c:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311165018574.png">

<link rel="canonical" href="http://yoursite.com/2020/04/15/%E5%89%8D%E7%AB%AF/JavaScript/JavaScript/%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C%E5%AD%A6%E4%B9%A0/HTML%20DOM%20%E5%AF%B9%E8%B1%A1/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>前端/JavaScript/JavaScript/参考手册学习/HTML DOM 对象 | heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/04/15/%E5%89%8D%E7%AB%AF/JavaScript/JavaScript/%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C%E5%AD%A6%E4%B9%A0/HTML%20DOM%20%E5%AF%B9%E8%B1%A1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          前端/JavaScript/JavaScript/参考手册学习/HTML DOM 对象<a href="https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name_posts/%E5%89%8D%E7%AB%AF/JavaScript/JavaScript/%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C%E5%AD%A6%E4%B9%A0/HTML%20DOM%20%E5%AF%B9%E8%B1%A1.md" class="post-edit-link" title="编辑" rel="noopener" target="_blank"><i class="fa fa-pencil"></i></a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-04-15 09:47:24" itemprop="dateCreated datePublished" datetime="2020-04-15T09:47:24+08:00">2020-04-15</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:26:23" itemprop="dateModified" datetime="2020-06-26T15:26:23+08:00">2020-06-26</time>
              </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>20k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>19 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="HTML-DOM"><a href="#HTML-DOM" class="headerlink" title="HTML DOM"></a>HTML DOM</h2><h3 id="DOM-文档对象模型"><a href="#DOM-文档对象模型" class="headerlink" title="DOM(文档对象模型)"></a>DOM(文档对象模型)</h3><hr>
<h3 id="DOM-HTML"><a href="#DOM-HTML" class="headerlink" title="DOM HTML"></a>DOM HTML</h3><hr>
<h4 id="1-改变HTML输出流-document-write"><a href="#1-改变HTML输出流-document-write" class="headerlink" title="1. 改变HTML输出流 document.write()"></a>1. 改变HTML输出流 <code>document.write()</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.write(&#39;HTML内容&#39;);</span><br></pre></td></tr></table></figure>



<h4 id="2-改变HTML内容-innerHTML-39-39"><a href="#2-改变HTML内容-innerHTML-39-39" class="headerlink" title="2. 改变HTML内容 .innerHTML = &#39;&#39;"></a>2. 改变HTML内容 <code>.innerHTML = &#39;&#39;</code></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.getElementById(id).innerHTML&#x3D;新的 HTML</span><br></pre></td></tr></table></figure>

<blockquote>
<p>innerText 与 innerHTML的区别</p>
<p>innerText 只是插入值</p>
<p>innerHTML 插入HTML标签和值</p>
</blockquote>
<h4 id="3-改变HTML属性-解释-html标签中属性，这种方法更改不了自定义的属性-attribute-新属性"><a href="#3-改变HTML属性-解释-html标签中属性，这种方法更改不了自定义的属性-attribute-新属性" class="headerlink" title="3. 改变HTML属性 解释 html标签中属性，这种方法更改不了自定义的属性 .attribute=新属性"></a>3. 改变HTML属性 解释 html标签中属性，这种方法更改不了自定义的属性 <code>.attribute=新属性</code></h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">docuemnt.getElementById(id).attribute=新属性</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"image"</span>).src=<span class="string">"landscape.jpg"</span>;</span><br></pre></td></tr></table></figure>





<h3 id="DOM-CSS-Element-style-property-新样式"><a href="#DOM-CSS-Element-style-property-新样式" class="headerlink" title="DOM CSS Element.style.property=新样式"></a>DOM CSS <code>Element.style.property=新样式</code></h3><hr>
<h4 id="改变HTML样式"><a href="#改变HTML样式" class="headerlink" title="改变HTML样式"></a>改变HTML样式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(id).style.property=新样式</span><br></pre></td></tr></table></figure>



<h3 id="DOM-Event"><a href="#DOM-Event" class="headerlink" title="DOM Event"></a>DOM Event</h3><hr>
<p>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</p>
<p>如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">onclick&#x3D;JavaScript</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">事件名称</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td align="center">鼠标事件</td>
<td><code>onmousedown(点击鼠标按钮)、onmouseup(释放鼠标按钮) 以及 onclick 事件</code><br><code>onmouseover（鼠标移入）与onmouseout（鼠标移出）</code></td>
<td></td>
</tr>
<tr>
<td align="center">键盘事件</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">滚动事件</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">表单事件</td>
<td><code>onfocus(当输入字段获得焦点时)</code></td>
<td></td>
</tr>
<tr>
<td align="center">页面加载</td>
<td><code>onload 和 onunload 事件</code></td>
<td></td>
</tr>
</tbody></table>
<p><strong>onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分</strong>。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。</p>
<p>onload 和 onunload 事件会在用户进入或离开页面时被触发。</p>
<p>onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。</p>
<p>onload 和 onunload 事件可用于处理 cookie。</p>
<p>事件加载方法一：HTML 事件属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onclick&#x3D;&quot;displayDate()&quot;&gt;点这里&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>



<h3 id="DOM-EventListener-addEventListener-和-removerEventListener"><a href="#DOM-EventListener-addEventListener-和-removerEventListener" class="headerlink" title="DOM EventListener  addEventListener() 和 removerEventListener()"></a>DOM EventListener  <code>addEventListener() 和 removerEventListener()</code></h3><hr>
<h3 id="addEventListener-方法"><a href="#addEventListener-方法" class="headerlink" title="addEventListener()方法"></a>addEventListener()方法</h3><ul>
<li>addEventListener()方法用于向指定元素添加事件句柄、</li>
<li>添加的事件句柄不会覆盖已存在的事件句柄、</li>
<li>可以向一个元素添加多个事件句柄、</li>
<li>可以向同个元素添加多个同类型的事件句柄、</li>
<li>可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。</li>
<li>==addEventListener() 方法可以更简单的控制事件（冒泡与捕获）==</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">element.addEventListener(event, <span class="function"><span class="keyword">function</span>, <span class="title">useCapture</span>);</span></span><br><span class="line"><span class="function"><span class="title">element</span>.<span class="title">addEventListener</span>(<span class="params"><span class="string">"click"</span>,displayDate</span>);</span></span><br><span class="line"><span class="function"><span class="title">elemnet</span>.<span class="title">addEventListener</span>(<span class="params"><span class="string">"click"</span>,function(</span>)</span>&#123;	&#125;);</span><br><span class="line"><span class="comment">//不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。</span></span><br></pre></td></tr></table></figure>

<ul>
<li>第一个参数是事件的类型 (如 “click” 或 “mousedown”).</li>
<li>第二个参数是事件触发后调用的函数。</li>
<li><code>第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。</code></li>
</ul>
<h5 id="传递参数"><a href="#传递参数" class="headerlink" title="传递参数"></a>传递参数</h5><p>当传递参数值时，使用”匿名函数”调用带参数的函数：</p>
<h5 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.addEventListener(&quot;click&quot;, function()&#123; myFunction(p1, p2); &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="removerEventListener-方法"><a href="#removerEventListener-方法" class="headerlink" title="removerEventListener()方法"></a>removerEventListener()方法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">element.removeEventListener(&quot;mousemove&quot;, myFunction);</span><br><span class="line">element.attachEvent(event, function);</span><br><span class="line">element.detachEvent(event, function);</span><br><span class="line">注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:</span><br></pre></td></tr></table></figure>

<p>跨浏览器解决方法:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var x &#x3D; document.getElementById(&quot;myBtn&quot;);</span><br><span class="line">if (x.addEventListener) &#123;          &#x2F;&#x2F; 所有主流浏览器，除了 IE 8 及更早版本</span><br><span class="line">  x.addEventListener(&quot;click&quot;, myFunction);</span><br><span class="line">&#125; else if (x.attachEvent) &#123;         &#x2F;&#x2F; IE 8 及更早版本</span><br><span class="line">  x.attachEvent(&quot;onclick&quot;, myFunction);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="事件冒泡-false-里到外，默认冒泡-或事件捕获-外到里"><a href="#事件冒泡-false-里到外，默认冒泡-或事件捕获-外到里" class="headerlink" title="事件冒泡( false 里到外，默认冒泡)或事件捕获(外到里)"></a>事件冒泡( false 里到外，默认冒泡)或事件捕获(外到里)</h3><p><code>事件传递有两种方式：冒泡与捕获。</code></p>
<p>事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 “click” 事件先被触发呢？</p>
<p>在 <em>冒泡</em> 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。</p>
<p>在 <em>捕获</em> 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。</p>
<p>addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">addEventListener(event, function, useCapture);</span><br></pre></td></tr></table></figure>

<p><code>默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.getElementById(&quot;myDiv&quot;).addEventListener(&quot;click&quot;, myFunction, true);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>设置父元素为true，</p>
</blockquote>
<p><a href="http://caibaojian.com/javascript-stoppropagation-preventdefault.html" target="_blank" rel="noopener">JS阻止冒泡和取消默认事件(默认行为)-前端开发博客</a></p>
<h3 id="阻止冒泡-e-stopPropagation-与-e-canceBubble-true"><a href="#阻止冒泡-e-stopPropagation-与-e-canceBubble-true" class="headerlink" title="阻止冒泡 e.stopPropagation() 与 e.canceBubble = true"></a>阻止冒泡 <code>e.stopPropagation() 与 e.canceBubble = true</code></h3><p>w3c的方法是<code>e.stopPropagation()</code>  、IE则是使用``e.canceBubble = true`</p>
<p>stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.event?<span class="built_in">window</span>.event.cancelBubble = <span class="literal">true</span>:e.stopPropagation()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">stopBubble</span>(<span class="params">e</span>) </span>&#123; </span><br><span class="line"><span class="comment">//如果提供了事件对象，则这是一个非IE浏览器 </span></span><br><span class="line"><span class="keyword">if</span> ( e &amp;&amp; e.stopPropagation ) </span><br><span class="line">    <span class="comment">//因此它支持W3C的stopPropagation()方法 </span></span><br><span class="line">    e.stopPropagation(); </span><br><span class="line"><span class="keyword">else</span> </span><br><span class="line">    <span class="comment">//否则，我们需要使用IE的方式来取消事件冒泡 </span></span><br><span class="line">    <span class="built_in">window</span>.event.cancelBubble = <span class="literal">true</span>; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><a href="http://caibaojian.com/288.html" target="_blank" rel="noopener">javascript常用代码大全-前端开发博客</a></p>
<h3 id="取消默认事件-e-preventDefault-e-returnValue-false"><a href="#取消默认事件-e-preventDefault-e-returnValue-false" class="headerlink" title="取消默认事件 e.preventDefault() e.returnValue = false"></a>取消默认事件 <code>e.preventDefault() e.returnValue = false</code></h3><p>w3c的方法是<code>e.preventDefault()</code>，IE则是使用<code>e.returnValue = false</code>;</p>
<p>preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。</p>
<p>什么元素有默认行为呢？如链接<a>，提交按钮<input type="submit">等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//假定有链接&lt;a href="http://caibaojian.com/" id="testA" &gt;caibaojian.com&lt;/a&gt;</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="built_in">document</span>.getElementById(<span class="string">"testA"</span>);</span><br><span class="line">a.onclick =<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line"><span class="keyword">if</span>(e.preventDefault)&#123;</span><br><span class="line">e.preventDefault();</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line"><span class="built_in">window</span>.event.returnValue == <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//阻止浏览器的默认行为 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">stopDefault</span>(<span class="params"> e </span>) </span>&#123; </span><br><span class="line">    <span class="comment">//阻止默认浏览器动作(W3C) </span></span><br><span class="line">    <span class="keyword">if</span> ( e &amp;&amp; e.preventDefault ) </span><br><span class="line">        e.preventDefault(); </span><br><span class="line">    <span class="comment">//IE中阻止函数器默认动作的方式 </span></span><br><span class="line">    <span class="keyword">else</span> </span><br><span class="line">        <span class="built_in">window</span>.event.returnValue = <span class="literal">false</span>; </span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="使用jQuery，既阻止默认行为又停止冒泡"><a href="#使用jQuery，既阻止默认行为又停止冒泡" class="headerlink" title="使用jQuery，既阻止默认行为又停止冒泡"></a>使用<a href="http://caibaojian.com/t/jquery" target="_blank" rel="noopener">jQuery</a>，既阻止默认行为又停止冒泡</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">'div'</span>  <span class="attr">onclick</span>=<span class="string">'alert("div");'</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>  <span class="attr">onclick</span>=<span class="string">'alert("ul");'</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">'ul-a'</span> <span class="attr">onclick</span>=<span class="string">'alert("li");'</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://caibaojian.com/"</span><span class="attr">id</span>=<span class="string">"testC"</span>&gt;</span>caibaojian.com<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">$("#testC").on('click',function()&#123;</span><br><span class="line">return false;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<h3 id="DOM-Element"><a href="#DOM-Element" class="headerlink" title="DOM Element"></a>DOM Element</h3><hr>
<h3 id="JS-DOM-节点-增删改查"><a href="#JS-DOM-节点-增删改查" class="headerlink" title="JS DOM(节点) 增删改查"></a>JS DOM(节点) 增删改查</h3><p><img src="C:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311165018574.png" alt="image-20200311165018574"></p>
<h6 id="添加-创建-节点"><a href="#添加-创建-节点" class="headerlink" title="添加(创建)节点"></a>添加(创建)节点</h6><p><strong>document.write()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.write(<span class="string">"内容"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;h1&gt;内容&lt;/h1&gt;"</span>);</span><br></pre></td></tr></table></figure>

<p><strong>create系列方法</strong> create Element()/TextNode()/DocumentFragment()/Comment()</p>
<table>
<thead>
<tr>
<th align="center">create方法</th>
<th>功能</th>
<th>参数</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><strong>document.createElement()</strong></td>
<td>创建标签元素</td>
<td>标签</td>
</tr>
<tr>
<td align="center">document.create<strong>TextNode()</strong></td>
<td>创建文本节点（添加文本）</td>
<td>文本内容</td>
</tr>
<tr>
<td align="center">document.create<strong>DocumentFragment()</strong></td>
<td>创建文档片段</td>
<td>无</td>
</tr>
<tr>
<td align="center">document.create<strong>Comment()</strong></td>
<td>创建注释节点(很少动态创建)</td>
<td>文本</td>
</tr>
</tbody></table>
<p><strong>appendChild()方法</strong> 属性值没有双引号 装填到DOM树上</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"mylist"</span>&gt; &lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">var ul = document.getElementById("mylist");</span></span><br><span class="line"><span class="regexp">var li = document.createElement("li"); /</span><span class="regexp">/创建标签元素</span></span><br><span class="line"><span class="regexp">ul.appendChild(li); /</span><span class="regexp">/appendChild() 属性值没有双引号</span></span><br><span class="line"><span class="regexp">var txt = document.createTextNode("传递进去的文本"); /</span><span class="regexp">/创建文本节点（添加文本）</span></span><br><span class="line"><span class="regexp">li.appendChild(txt);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">var ul = document.getElementById("mylist");</span></span><br><span class="line"><span class="regexp">var fragment = document.createDocumentFragment(); /</span><span class="regexp">/创建文档片段</span></span><br><span class="line"><span class="regexp">var li = null;</span></span><br><span class="line"><span class="regexp">for(var i = 0; i &lt; 3;i++ )&#123;</span></span><br><span class="line"><span class="regexp">    li = document.createElement("li");</span></span><br><span class="line"><span class="regexp">    li.appendChild(document.createTextNode("Item " + (i+1)));</span></span><br><span class="line"><span class="regexp">    fragement.appendChild(li);</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">ul.appendChild(fragment);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">var ul = document.getElementById("box");</span></span><br><span class="line"><span class="regexp">var fragment = document.createDocumentFragment();</span></span><br><span class="line"><span class="regexp">var comment = document.createComment("A comment"); /</span><span class="regexp">/创建注释节点</span></span><br><span class="line"><span class="regexp">var li = null;</span></span><br><span class="line"><span class="regexp">for (var i = 0; i &lt; 3; i++) &#123;</span></span><br><span class="line"><span class="regexp">    li = document.createElement("li");</span></span><br><span class="line"><span class="regexp">    li.appendChild(document.createTextNode("Item " + (i + 1)));</span></span><br><span class="line"><span class="regexp">    fragment.appendChild(li);</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">ul.appendChild(fragment);</span></span><br><span class="line"><span class="regexp">document.body.insertBefore(comment, document.body.firstChild);</span></span><br></pre></td></tr></table></figure>

<p><strong>insertBefor(插入的节点，插入的位置)</strong>方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.body.insertBefore(commert,<span class="built_in">document</span>.body.firstChild);</span><br></pre></td></tr></table></figure>

<p>扩展：<strong>document.createElement()</strong>还能支持创建当前浏览器不支持的标签名，在IE6-8下，这是一个著名的hack。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 立即调用的函数表达式，让代码在当前作用域下执行，不污染window环境</span></span><br><span class="line"><span class="comment">// IE不支持 html5元素 ，解决方案document.createElement()</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span>(！</span><br><span class="line">     <span class="comment">/*@cc_on!@*/</span>  <span class="comment">//如果是IE浏览器执行中间的代码，其他浏览器不执行 IE浏览器 ！！0 假 </span></span><br><span class="line">      <span class="number">0</span>) <span class="keyword">return</span>;  <span class="comment">//IE的功能 条件编译语句 其他浏览器 ！0 真 </span></span><br><span class="line">    <span class="keyword">var</span> e = <span class="string">"abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video"</span>.split(<span class="string">', '</span>);</span><br><span class="line">    <span class="keyword">var</span> i = e.length;</span><br><span class="line">    <span class="keyword">while</span>(i--)&#123;</span><br><span class="line">        <span class="built_in">document</span>.createElement(e[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<p>高效创建节点的方法 inner/out HTML/Text</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>功能</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>innerHTML</td>
<td>用来设置或获取当前标签的起始和结束里面的内容<strong>（html-&gt;DOM节点）</strong></td>
<td></td>
</tr>
<tr>
<td>outerHTML</td>
<td>返回调用它的元素及所有子节点的HTML标签<strong>(输出HMTL的内容)</strong></td>
<td></td>
</tr>
<tr>
<td>innerText</td>
<td>设置或获取位于对象起始和结束标签内的文本<strong>(获取标签内的文本)</strong></td>
<td></td>
</tr>
<tr>
<td>outerText</td>
<td>在标签内添加内容</td>
<td></td>
</tr>
</tbody></table>
<p>innerHTML</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> content = <span class="built_in">document</span>.getElement(<span class="string">"content"</span>);</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">"&lt;h1&gt;标题h1&lt;/h1&gt;"</span></span><br><span class="line">		+<span class="string">"&lt;ul&gt;"</span></span><br><span class="line">		+<span class="string">"&lt;li&gt;li1&lt;/li&gt;"</span></span><br><span class="line">        +<span class="string">"&lt;li&gt;li2&lt;/li&gt;"</span></span><br><span class="line">        +<span class="string">"&lt;li&gt;li3&lt;/li&gt;"</span></span><br><span class="line">        +<span class="string">"&lt;li&gt;li4&lt;/li&gt;"</span></span><br><span class="line">		+<span class="string">"&lt;/ul&gt;"</span>;</span><br><span class="line">content.innerHTML = str;</span><br></pre></td></tr></table></figure>

<p>使用innerHTML的限制</p>
<ul>
<li><p>字符串的最左边不能出现空白，IE6-8会自动移除掉它，chrome保存空格</p>
</li>
<li><p>大多数浏览器不<strong>会对script标签进行脚本执行操作</strong>，通过innerHTML插入html不会执行其脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//解决方法(大多数浏览器不支持，IE8及更早版本支持)</span></span><br><span class="line"><span class="comment">//1、为script标签添加defer属性</span></span><br><span class="line"><span class="comment">//2、script标签要在有作用域的元素之后 前面插入有作用域的元素（文本节点，元素节点）</span></span><br><span class="line"><span class="comment">// script(无作用域的元素) </span></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">"&lt;script&gt;alert("</span>hello<span class="string">")&lt;\/script&gt;"</span>; <span class="comment">//需要转义字符</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">"&lt;input type=\"hidden\"&gt;&lt;script defer&gt;alert('hello');&lt;\/script&gt;"</span>; <span class="comment">//需要转义字符 alert要单引号，分号  type=\"hidden\" defer</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>不能单独创建meta、style、link等元素，一定要在前面加上一些字符</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> content = <span class="built_in">document</span>.getElement(<span class="string">"content"</span>);</span><br><span class="line"><span class="comment">//innerHTML创建style</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">"_&lt;style type=\"text/css\"&gt;body&#123;background:red;&#125;&lt;/style&gt;"</span>;</span><br><span class="line"><span class="comment">//IE8以及以前版本 </span></span><br><span class="line">content.removeChild(content.firstChild); <span class="comment">//删除有作用域的节点 _</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<p>outerHTML</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">content.outerHTML = <span class="string">"&lt;p&gt;HTML&lt;/p&gt;"</span> <span class="comment">//写会覆盖原本的HTML DOM内容</span></span><br></pre></td></tr></table></figure>

<p>innerText //textContent()  某个标签元素添加内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(content.innerText) <span class="comment">//打印Text文本</span></span><br><span class="line">content.innerText = <span class="string">"&lt;p&gt;HTML&lt;/p&gt;"</span> <span class="comment">//写会覆盖原本的HTML 直接输出&lt;p&gt;HTML&lt;/p&gt;</span></span><br></pre></td></tr></table></figure>

<p>火狐浏览器不支持innerText 支持textContent()</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(content,textContent);</span><br><span class="line">content.textContent =  <span class="string">"&lt;p&gt;HTML&lt;/p&gt;"</span> <span class="comment">//写会覆盖原本的HTML 直接输出&lt;p&gt;HTML&lt;/p&gt;</span></span><br></pre></td></tr></table></figure>

<p>通用方法(兼容所有浏览器)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> content = <span class="built_in">document</span>.getElement(<span class="string">"content"</span>);</span><br><span class="line"><span class="comment">// 读取</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getInnerText</span>(<span class="params">element</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> (<span class="keyword">typeof</span> element.textContent == ”string“)?element.textContent:element.innerText;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 写入</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setInnerText</span>(<span class="params">element,text</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span>(<span class="keyword">typeof</span> element.textContent == <span class="string">"string"</span>)&#123;</span><br><span class="line">		element.textContent = text;</span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		element.innerText = text;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">setInnerText(content,<span class="string">"Hello World"</span>); <span class="comment">//写入</span></span><br><span class="line"><span class="built_in">console</span>.log(getInnerText(content));</span><br></pre></td></tr></table></figure>

<p>outerText (不建议使用该属性，会导致调用它的元素不存在)</p>
<p>读取内容与innerText一样</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(content.outerText());</span><br><span class="line">content.outerText = <span class="string">"&lt;p&gt;HTML&lt;/p&gt;"</span>; <span class="comment">//写入内容 会把原本的元素调用它的元素取消</span></span><br></pre></td></tr></table></figure>





<h6 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h6><ul>
<li><p><strong>removeChild()  删除某个节点中指定的子节点</strong></p>
</li>
<li><p>removeNode()  </p>
<p>IE的私有实现</p>
<p>将目标节点从文档中删除，返回目标节点</p>
<p>参数是布尔值，默认值是false</p>
</li>
<li><p>innerHTML</p>
</li>
<li><p>deleteContents()</p>
</li>
<li><p>textContent</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"myUl"</span>&gt;</span><br><span class="line">    &lt;li&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li&gt;2&lt;/</span>li&gt;	</span><br><span class="line">    &lt;li&gt;<span class="number">3</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;    </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//removeChild()  删除某个节点中指定的子节点</span></span><br><span class="line"><span class="keyword">var</span> myUl - <span class="built_in">document</span>.getElementById(<span class="string">"myUl"</span>);</span><br><span class="line"><span class="keyword">var</span> secondChild = myUl.removeChild(myUl.childNodes[<span class="number">1</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(secondChild);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> removedNode = myUl.removeNode(); <span class="comment">// flase删除父节点 true删除包含父子元素</span></span><br><span class="line"><span class="built_in">console</span>.log(removedNode.outerHTML);</span><br></pre></td></tr></table></figure>



<p>removerChild（） 与innerHTML（）比较</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"myUl"</span>&gt;</span><br><span class="line">	&lt;li&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">	&lt;li&gt;2&lt;/</span>li&gt;</span><br><span class="line">	&lt;li&gt;<span class="number">3</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">	&lt;li&gt;4&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/removeChild()</span></span><br><span class="line"><span class="regexp">var div = document.createELement("div");</span></span><br><span class="line"><span class="regexp">console.log(div.parentNode); /</span><span class="regexp">/null</span></span><br><span class="line"><span class="regexp">document.body.removeChild(document.body.appendChild(div));</span></span><br><span class="line"><span class="regexp">console.log(div.parentNode); /</span><span class="regexp">/null</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/innerHTML</span></span><br><span class="line"><span class="regexp">document.body.innerHTML = "";</span></span><br><span class="line"><span class="regexp">console.log(myUl.parentNode); /</span><span class="regexp">/null</span></span><br></pre></td></tr></table></figure>



<h6 id="修改节点-操作节点"><a href="#修改节点-操作节点" class="headerlink" title="修改节点(操作节点)"></a>修改节点(操作节点)</h6><ul>
<li>appendChild() 为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。</li>
<li>insertBefore(插入节点，位置)  在指定的已有子节点之前插入新的子节点</li>
<li>replaceChild() 替换节点</li>
<li>cloneChild()  创建节点的拷贝，并返回该副本</li>
<li>normalize() 合并相邻的文本节点</li>
<li>splitText() 按照指定的位置把文本节点分隔成为两个节点</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"myUl"</span>&gt;</span><br><span class="line">	&lt;li&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">	&lt;li&gt;2&lt;/</span>li&gt;</span><br><span class="line">	&lt;li&gt;<span class="number">3</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line"><span class="comment">//appendChild()</span></span><br><span class="line"><span class="keyword">var</span> myUl = <span class="built_in">document</span>.createELement(<span class="string">"myUl"</span>);</span><br><span class="line"><span class="keyword">var</span> txt = <span class="built_in">document</span>.createTextNode(<span class="string">"4"</span>);</span><br><span class="line"><span class="keyword">var</span> li = <span class="built_in">document</span>.createElement (<span class="string">"li"</span>);</span><br><span class="line">li.appendChild(txt);</span><br><span class="line">myUl.appendChild(li);</span><br><span class="line"></span><br><span class="line"><span class="comment">//i</span></span><br></pre></td></tr></table></figure>





<h6 id="查找节点"><a href="#查找节点" class="headerlink" title="查找节点"></a>查找节点</h6><p>节点遍历</p>
<p>两套API</p>
<p>节点关系</p>
<p>第一套api（包含空白文本节点 ）</p>
<p><img src="C:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200310171446470.png" alt="image-20200310171446470"></p>
<p><img src="C:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311103003282.png" alt="image-20200311103003282"></p>
<ul>
<li><p><strong>父节点查找子节点</strong></p>
<p>firstChild</p>
<p>lastClild</p>
<p>childNodes[1] 第二个节点</p>
<p>childNodes.item(1)</p>
</li>
<li><p><strong>子节点查找父节点</strong></p>
<p>parentNode</p>
</li>
<li><p><strong>兄弟节点</strong></p>
<p>nextSibling   //下一个</p>
<p>previousSibling //前一个</p>
</li>
<li><p>*<em>子节点查找祖先节点 *</em></p>
<p>ownerDocument</p>
</li>
<li><p><strong>祖先节点查找子节点</strong></p>
</li>
</ul>
<ul>
<li><p><strong>判断是不有一个子节点</strong></p>
<p>hasChildNodes()</p>
<p>获取文本节点的个数</p>
<p>childNodes.length</p>
</li>
</ul>
<p>head与body之间的空格也是一个文本节点</p>
<p>属性</p>
<p><strong>document.documentElement; 获取属性可返回文档的根节点 HTML元素</strong></p>
<p>document节点是文档的根节点</p>
<p><strong>tagName 属性返回元素的标签名</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;p id=<span class="string">"p"</span>&gt;文本节点&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">var oHTML = document,documentElement;</span></span><br><span class="line"><span class="regexp">console.log(oHTML.tagName)</span></span><br><span class="line"><span class="regexp">var p = document.getElementById("p");</span></span><br><span class="line"><span class="regexp">var txt = p.childNodes[0];</span></span><br><span class="line"><span class="regexp">console.log(p.ownerDocumen == document); /</span><span class="regexp">/true</span></span><br><span class="line"><span class="regexp">console.log(p.hasChildNodes()); /</span><span class="regexp">/true 有文本叶子节点</span></span><br><span class="line"><span class="regexp">console.log(txt.hasChildNodes()); /</span><span class="regexp">/false</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/一个节点（元素）内有文字是一个文本节点</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//遍历HTML树</span></span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = <span class="string">""</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">travel</span>(<span class="params">space,node</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span>(node.tagName)&#123; <span class="comment">//如果当前节点是标签，不是空的，就拼接字符串</span></span><br><span class="line">		s += space + node.tagName + <span class="string">"&lt;/br&gt;"</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">var</span> len = node.childNodes.length; <span class="comment">//保存当前节点的子节点</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; len;i++)&#123; <span class="comment">//遍历节点的子节点</span></span><br><span class="line">		travel(space + <span class="string">"|-"</span>,node.childNodes[i]);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">travel(<span class="string">""</span>,<span class="built_in">document</span>);</span><br><span class="line"><span class="built_in">document</span>.write(s);</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">输出结果</span></span><br><span class="line"><span class="comment">|-HTML</span></span><br><span class="line"><span class="comment">|-|-HEAD</span></span><br><span class="line"><span class="comment">|-|-|-META</span></span><br><span class="line"><span class="comment">|-|-|-META</span></span><br><span class="line"><span class="comment">|-|-|-TITLE</span></span><br><span class="line"><span class="comment">|-|-|-SCRIPT</span></span><br><span class="line"><span class="comment">|-|-BODY</span></span><br><span class="line"><span class="comment">|-|-|-DIV</span></span><br><span class="line"><span class="comment">|-|-|-|-P</span></span><br><span class="line"><span class="comment">|-|-|-SCRIPT</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<p>空白的文本节点影响节点的内容 输出 #text</p>
<p>解决空白的文本节点纳入到子节点的计算范围内中（过滤文本节点）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box = doucment.getElementById(<span class="string">"box"</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; box.childNodes.length;i &lt; len;i++)&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(box.childNodes[i]);</span><br><span class="line">	<span class="comment">//方法一</span></span><br><span class="line">	<span class="keyword">if</span>(box.childNodes[i].nodeType == <span class="number">1</span>)&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(box.childNodes[i]);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>第二套api IE8以下不支持 IE9以上 火狐3.5以上 safari4以上 chrome opera10以上</p>
<p><img src="C:%5CUsers%5CAdministrator%5CDesktop%5CStudyNote%5Cblogphoto%5Cimage-20200311122817471.png" alt="image-20200311122817471"></p>
<p>firstElementChild</p>
<p>lastElementChild</p>
<p>children[0]</p>
<p>children[1]</p>
<p>nextElementSibling</p>
<p>previousElementSibling</p>
<p>childElementCount 数量个数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法二</span></span><br><span class="line"><span class="keyword">var</span> box = doucment.getElementById(<span class="string">"box"</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; box.childElementCount;i &lt; len;i++)&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(box.children[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>











<h4 id="创建-appendChild-添加新元素到尾部-和-insertBefore-将新元素添加到开始位置"><a href="#创建-appendChild-添加新元素到尾部-和-insertBefore-将新元素添加到开始位置" class="headerlink" title="创建 appendChild()添加新元素到尾部 和 insertBefore()将新元素添加到开始位置"></a>创建 <code>appendChild()添加新元素到尾部 和 insertBefore()将新元素添加到开始位置</code></h4><p>appendChild()  ==createElement(‘HTML元素’)  + creatTextNode(‘文本内容’) + 创建的HMTL元素.appendChild(‘文本内容’)==</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var p &#x3D; createElement(&#39;h1&#39;); &#x2F;&#x2F; 创建一个</span><br></pre></td></tr></table></figure>



<p>insertBefore()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>





<h4 id="删除-removeChild"><a href="#删除-removeChild" class="headerlink" title="删除 removeChild()"></a>删除 <code>removeChild()</code></h4><h4 id="替换-replaceChild"><a href="#替换-replaceChild" class="headerlink" title="替换 replaceChild()"></a>替换 <code>replaceChild()</code></h4><h2 id="HTMLCollection-与-NodeList-的区别"><a href="#HTMLCollection-与-NodeList-的区别" class="headerlink" title="HTMLCollection 与 NodeList 的区别"></a>HTMLCollection 与 NodeList 的区别</h2><ul>
<li><a href="https://www.runoob.com/js/js-htmldom-collections.html" target="_blank" rel="noopener">HTMLCollection</a> 是 HTML 元素的集合。</li>
<li>NodeList 是一个文档节点的集合。</li>
<li>NodeList 与 HTMLCollection 有很多类似的地方。</li>
<li>NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。</li>
<li>NodeList 与 HTMLCollection 都有 length 属性。</li>
<li>HTMLCollection 元素可以通过 name，id 或索引来获取。</li>
<li>NodeList 只能通过索引来获取。</li>
<li>只有 NodeList 对象有包含属性节点和文本节点。</li>
</ul>
<h3 id="HTMLCollection对象-getElementsByTagName-方法-不是一个数组！"><a href="#HTMLCollection对象-getElementsByTagName-方法-不是一个数组！" class="headerlink" title="HTMLCollection对象 getElementsByTagName()方法 不是一个数组！"></a>HTMLCollection对象 <code>getElementsByTagName()方法 不是一个数组！</code></h3><hr>
<p>向文档添加和移除元素（节点）</p>
<p>HTML Collection对象类似包含HTML元素的一个数组</p>
<p><code>length属性</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myCollection = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"p"</span>);</span><br><span class="line"><span class="keyword">var</span> i;</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; myCollection.length; i++) &#123;</span><br><span class="line">    myCollection[i].style.backgroundColor = <span class="string">"red"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="Nodelist对象-NodeList-对象是一个从文档中获取的节点列表-集合-。"><a href="#Nodelist对象-NodeList-对象是一个从文档中获取的节点列表-集合-。" class="headerlink" title="Nodelist对象 NodeList 对象是一个从文档中获取的节点列表 (集合) 。"></a>Nodelist对象 <code>NodeList 对象是一个从文档中获取的节点列表 (集合) 。</code></h3><hr>
<h2 id="HTML-DOM-事件"><a href="#HTML-DOM-事件" class="headerlink" title="HTML DOM 事件"></a>HTML DOM 事件</h2><p>HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。</p>
<p>事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。</p>
<p>常见的HTML事件 (点击) onclick onmouseover onmouseout   onkeydown  onchange onkeydown onchange</p>
<p><strong>DOM：</strong> 指明使用的 DOM 属性级别。</p>
<h3 id="鼠标事件-点击-click和dbclick-up和down-contextmenu-移动-mousemove-enter和leave-over和out"><a href="#鼠标事件-点击-click和dbclick-up和down-contextmenu-移动-mousemove-enter和leave-over和out" class="headerlink" title="鼠标事件 点击 click和dbclick up和down contextmenu 移动 mousemove enter和leave over和out"></a>鼠标事件 <code>点击 click和dbclick up和down contextmenu 移动 mousemove enter和leave over和out</code></h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onclick.html" target="_blank" rel="noopener">onclick</a> &amp;&amp;<a href="https://www.runoob.com/jsref/event-ondblclick.html" target="_blank" rel="noopener">ondblclick</a></td>
<td align="left">当用户<code>点击</code>某个对象时调用的事件句柄。当用户<code>双击</code>某个对象时调用的事件句柄。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onmouseup.html" target="_blank" rel="noopener">onmouseup</a> &amp;&amp;<a href="https://www.runoob.com/jsref/event-onmousedown.html" target="_blank" rel="noopener">onmousedown</a></td>
<td align="left">鼠标按键被<code>松开</code>。鼠标按钮<code>被按下</code>。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onmousemove.html" target="_blank" rel="noopener">onmousemove</a></td>
<td align="left">鼠标<code>被移动</code>。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onmouseenter.html" target="_blank" rel="noopener">onmouseenter</a> &amp;&amp;<a href="https://www.runoob.com/jsref/event-onmouseleave.html" target="_blank" rel="noopener">onmouseleave</a></td>
<td align="left">当鼠标指针<code>移动到元素上</code>时触发。当鼠标指针<code>移出元素</code>时触发</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onmouseover.html" target="_blank" rel="noopener">onmouseover</a>&amp;&amp;<a href="https://www.runoob.com/jsref/event-onmouseout.html" target="_blank" rel="noopener">onmouseout</a></td>
<td align="left">鼠标移到某元素之上。|| 鼠标从某元素<code>移开</code>。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-oncontextmenu.html" target="_blank" rel="noopener">oncontextmenu</a></td>
<td align="left">在用户点击鼠标<code>右键打开上下文菜单时触发</code></td>
<td align="left"></td>
</tr>
</tbody></table>
<h4 id="onmouseenter-和-onmouseover-的不同-都是鼠标进入"><a href="#onmouseenter-和-onmouseover-的不同-都是鼠标进入" class="headerlink" title="onmouseenter 和 onmouseover 的不同 都是鼠标进入"></a>onmouseenter 和 onmouseover 的不同 都是鼠标进入</h4><h4 id="onmouseout-与-onmouseleave-的区别-都是鼠标离开"><a href="#onmouseout-与-onmouseleave-的区别-都是鼠标离开" class="headerlink" title="onmouseout 与 onmouseleave 的区别 都是鼠标离开"></a>onmouseout 与 onmouseleave 的区别 都是鼠标离开</h4><p><a href="https://www.cnblogs.com/zycbloger/p/5643122.html" target="_blank" rel="noopener">js 去掉浏览器右击默认事件 - </script> - 博客园</a></p>
<h3 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onkeypress.html" target="_blank" rel="noopener">onkeypress</a></td>
<td align="left">某个键盘按键被按下并松开。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onkeydown.html" target="_blank" rel="noopener">onkeydown</a>&amp;&amp;<a href="https://www.runoob.com/jsref/event-onkeyup.html" target="_blank" rel="noopener">onkeyup</a></td>
<td align="left">某个键盘按键被按下。某个键盘按键被松开。</td>
<td align="left">2</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">onkeydown 事件会在用户按下一个键盘按键时发生。</span><br><span class="line"></span><br><span class="line">提示： 与 onkeydown 事件相关联的事件触发次序:</span><br><span class="line"></span><br><span class="line">onkeydown</span><br><span class="line">onkeypress</span><br><span class="line">onkeyup</span><br></pre></td></tr></table></figure>



<h3 id="框架-对象（Frame-Object）事件"><a href="#框架-对象（Frame-Object）事件" class="headerlink" title="框架/对象（Frame/Object）事件"></a>框架/对象（Frame/Object）事件</h3><h3 id="表单事件-blur-focus-in-out-input、reset、search、select、submit"><a href="#表单事件-blur-focus-in-out-input、reset、search、select、submit" class="headerlink" title="表单事件 blur focus/in/out input、reset、search、select、submit"></a>表单事件 <code>blur focus/in/out input、reset、search、select、submit</code></h3><p>搜索框 </p>
<input type="search" id="myInput" onsearch="myFunction()">

<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onblur.html" target="_blank" rel="noopener">onblur</a></td>
<td align="left">元素失去焦点时触发</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onfocus.html" target="_blank" rel="noopener">onfocus</a>&amp;&amp;<a href="https://www.runoob.com/jsref/event-onfocusin.html" target="_blank" rel="noopener">onfocusin</a> &amp;&amp;<a href="https://www.runoob.com/jsref/event-onfocusout.html" target="_blank" rel="noopener">onfocusout</a></td>
<td align="left">元素获取焦点时触发、元素即将获取焦点时触发、元素即将失去焦点时触发</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onchange.html" target="_blank" rel="noopener">onchange</a></td>
<td align="left">该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-oninput.html" target="_blank" rel="noopener">oninput</a></td>
<td align="left">元素获取<code>用户输入时</code>触发</td>
<td align="left">3</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onreset.html" target="_blank" rel="noopener">onreset</a></td>
<td align="left">表单重置时触发</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onsearch.html" target="_blank" rel="noopener">onsearch</a></td>
<td align="left">用户向搜索域输入文本时触发 ( &lt;input=”search”&gt;)</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onselect.html" target="_blank" rel="noopener">onselect</a></td>
<td align="left">用户<code>选取文本</code>时触发 ( <input> 和 <textarea>)</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onsubmit.html" target="_blank" rel="noopener">onsubmit</a></td>
<td align="left">表单提交时触发</td>
<td align="left"></td>
</tr>
</tbody></table>
<blockquote>
<p>oninput与onserch的区别 </p>
<p>oninput 一个字符一个字符的更新</p>
<p>onserch</p>
</blockquote>
<h3 id="剪切板事件"><a href="#剪切板事件" class="headerlink" title="剪切板事件"></a>剪切板事件</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-oncopy.html" target="_blank" rel="noopener">oncopy</a></td>
<td align="left">该事件在用户<code>拷贝</code>元素内容时触发 ctrl + c</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onpaste.html" target="_blank" rel="noopener">onpaste</a></td>
<td align="left">该事件在用户<code>粘贴</code>元素内容时触发 ctrl + v</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-oncut.html" target="_blank" rel="noopener">oncut</a></td>
<td align="left">该事件在用户<code>剪切</code>元素内容时触发 ctrl +x</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="打印事件"><a href="#打印事件" class="headerlink" title="打印事件"></a>打印事件</h3><h3 id="拖动事件"><a href="#拖动事件" class="headerlink" title="拖动事件"></a>拖动事件</h3><table>
<thead>
<tr>
<th align="left">事件</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondrag.html" target="_blank" rel="noopener">ondrag</a></td>
<td align="left">该事件在元素正在拖动时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondragend.html" target="_blank" rel="noopener">ondragend</a></td>
<td align="left">该事件在用户完成元素的拖动时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondragenter.html" target="_blank" rel="noopener">ondragenter</a></td>
<td align="left">该事件在拖动的元素进入放置目标时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondragleave.html" target="_blank" rel="noopener">ondragleave</a></td>
<td align="left">该事件在拖动元素离开放置目标时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondragover.html" target="_blank" rel="noopener">ondragover</a></td>
<td align="left">该事件在拖动元素在放置目标上时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondragstart.html" target="_blank" rel="noopener">ondragstart</a></td>
<td align="left">该事件在用户开始拖动元素时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondrop.html" target="_blank" rel="noopener">ondrop</a></td>
<td align="left">该事件在拖动元素放置在目标区域时触发</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="多媒体（Media）事件"><a href="#多媒体（Media）事件" class="headerlink" title="多媒体（Media）事件"></a>多媒体（Media）事件</h3><table>
<thead>
<tr>
<th align="left">事件</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onabort-media.html" target="_blank" rel="noopener">onabort</a></td>
<td align="left">事件在视频/音频（audio/video）终止加载时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-oncanplay.html" target="_blank" rel="noopener">oncanplay</a></td>
<td align="left">事件在用户可以开始播放视频/音频（audio/video）时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-oncanplaythrough.html" target="_blank" rel="noopener">oncanplaythrough</a></td>
<td align="left">事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ondurationchange.html" target="_blank" rel="noopener">ondurationchange</a></td>
<td align="left">事件在视频/音频（audio/video）的时长发生变化时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">onemptied</td>
<td align="left">当期播放列表为空时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onended.html" target="_blank" rel="noopener">onended</a></td>
<td align="left">事件在视频/音频（audio/video）播放结束时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onerror-media.html" target="_blank" rel="noopener">onerror</a></td>
<td align="left">事件在视频/音频（audio/video）数据加载期间发生错误时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onloadeddata.html" target="_blank" rel="noopener">onloadeddata</a></td>
<td align="left">事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onloadedmetadata.html" target="_blank" rel="noopener">onloadedmetadata</a></td>
<td align="left">事件在指定视频/音频（audio/video）的元数据加载后触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onloadstart.html" target="_blank" rel="noopener">onloadstart</a></td>
<td align="left">事件在浏览器开始寻找指定视频/音频（audio/video）触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onpause.html" target="_blank" rel="noopener">onpause</a></td>
<td align="left">事件在视频/音频（audio/video）暂停时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onplay.html" target="_blank" rel="noopener">onplay</a></td>
<td align="left">事件在视频/音频（audio/video）开始播放时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onplaying.html" target="_blank" rel="noopener">onplaying</a></td>
<td align="left">事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onprogress.html" target="_blank" rel="noopener">onprogress</a></td>
<td align="left">事件在浏览器下载指定的视频/音频（audio/video）时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onratechange.html" target="_blank" rel="noopener">onratechange</a></td>
<td align="left">事件在视频/音频（audio/video）的播放速度发送改变时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onseeked.html" target="_blank" rel="noopener">onseeked</a></td>
<td align="left">事件在用户重新定位视频/音频（audio/video）的播放位置后触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onseeking.html" target="_blank" rel="noopener">onseeking</a></td>
<td align="left">事件在用户开始重新定位视频/音频（audio/video）时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onstalled.html" target="_blank" rel="noopener">onstalled</a></td>
<td align="left">事件在浏览器获取媒体数据，但媒体数据不可用时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onsuspend.html" target="_blank" rel="noopener">onsuspend</a></td>
<td align="left">事件在浏览器读取媒体数据中止时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ontimeupdate.html" target="_blank" rel="noopener">ontimeupdate</a></td>
<td align="left">事件在当前的播放位置发送改变时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onvolumechange.html" target="_blank" rel="noopener">onvolumechange</a></td>
<td align="left">事件在音量发生改变时触发。</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-onwaiting.html" target="_blank" rel="noopener">onwaiting</a></td>
<td align="left">事件在视频由于要播放下一帧而需要缓冲时触发。</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="动画事件"><a href="#动画事件" class="headerlink" title="动画事件"></a>动画事件</h3><table>
<thead>
<tr>
<th align="left">事件</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-animationstart.html" target="_blank" rel="noopener">animationstart</a></td>
<td align="left">该事件在 CSS 动画开始播放时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-animationend.html" target="_blank" rel="noopener">animationend</a></td>
<td align="left">该事件在 CSS 动画结束播放时触发</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-animationiteration.html" target="_blank" rel="noopener">animationiteration</a></td>
<td align="left">该事件在 CSS 动画重复播放时触发</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="过渡事件"><a href="#过渡事件" class="headerlink" title="过渡事件"></a>过渡事件</h3><table>
<thead>
<tr>
<th align="left">事件</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-transitionend.html" target="_blank" rel="noopener">transitionend</a></td>
<td align="left">该事件在 CSS 完成过渡后触发。</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="其他事件"><a href="#其他事件" class="headerlink" title="其他事件"></a>其他事件</h3><h3 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h3><h3 id="常量"><a href="#常量" class="headerlink" title="常量"></a>常量</h3><table>
<thead>
<tr>
<th align="left">静态变量</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left">CAPTURING-PHASE</td>
<td align="left">当前事件阶段为捕获阶段(1)</td>
<td align="left">1</td>
</tr>
<tr>
<td align="left">AT-TARGET</td>
<td align="left">当前事件是目标阶段,在评估目标事件(1)</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">BUBBLING-PHASE</td>
<td align="left">当前的事件为冒泡阶段 (3)</td>
<td align="left">3</td>
</tr>
</tbody></table>
<h3 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-bubbles.html" target="_blank" rel="noopener">bubbles</a></td>
<td align="left">返回布尔值，指示事件是否是起泡事件类型。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-cancelable.html" target="_blank" rel="noopener">cancelable</a></td>
<td align="left">返回布尔值，指示事件是否可拥可取消的默认动作。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-currenttarget.html" target="_blank" rel="noopener">currentTarget</a></td>
<td align="left">返回其事件监听器触发该事件的元素。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">eventPhase</td>
<td align="left">返回事件传播的当前阶段。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-target.html" target="_blank" rel="noopener">target</a></td>
<td align="left">返回触发此事件的元素（事件的目标节点）。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-timestamp.html" target="_blank" rel="noopener">timeStamp</a></td>
<td align="left">返回事件生成的日期和时间。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-type.html" target="_blank" rel="noopener">type</a></td>
<td align="left">返回当前 Event 对象表示的事件的名称。</td>
<td align="left">2</td>
</tr>
</tbody></table>
<h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left">initEvent()</td>
<td align="left">初始化新创建的 Event 对象的属性。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">preventDefault()</td>
<td align="left">通知浏览器不要执行与事件关联的默认动作。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">stopPropagation()</td>
<td align="left">不再派发事件。</td>
<td align="left">2</td>
</tr>
</tbody></table>
<h3 id="目标事件对象"><a href="#目标事件对象" class="headerlink" title="目标事件对象"></a>目标事件对象</h3><h3 id="方法-1"><a href="#方法-1" class="headerlink" title="方法"></a>方法</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left">addEventListener()</td>
<td align="left">允许在目标事件中注册监听事件(IE8 = attachEvent())</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">dispatchEvent()</td>
<td align="left">允许发送事件到监听器上 (IE8 = fireEvent())</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">removeEventListener()</td>
<td align="left">运行一次注册在事件目标上的监听事件(IE8 = detachEvent())</td>
<td align="left">2</td>
</tr>
</tbody></table>
<h3 id="事件监听对象"><a href="#事件监听对象" class="headerlink" title="事件监听对象"></a>事件监听对象</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left">handleEvent()</td>
<td align="left">把任意对象注册为事件处理程序</td>
<td align="left">2</td>
</tr>
</tbody></table>
<h3 id="文档事件对象"><a href="#文档事件对象" class="headerlink" title="文档事件对象"></a>文档事件对象</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left">createEvent()</td>
<td align="left"></td>
<td align="left">2</td>
</tr>
</tbody></table>
<h3 id="鼠标-键盘事件对象"><a href="#鼠标-键盘事件对象" class="headerlink" title="鼠标/键盘事件对象"></a>鼠标/键盘事件对象</h3><h3 id="属性-1"><a href="#属性-1" class="headerlink" title="属性"></a>属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
<th align="left">DOM</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-altkey.html" target="_blank" rel="noopener">altKey</a></td>
<td align="left">返回当事件被触发时，”ALT” 是否被按下。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-button.html" target="_blank" rel="noopener">button</a></td>
<td align="left">返回当事件被触发时，哪个鼠标按钮被点击。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-clientx.html" target="_blank" rel="noopener">clientX</a></td>
<td align="left">返回当事件被触发时，鼠标指针的水平坐标。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-clienty.html" target="_blank" rel="noopener">clientY</a></td>
<td align="left">返回当事件被触发时，鼠标指针的垂直坐标。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-ctrlkey.html" target="_blank" rel="noopener">ctrlKey</a></td>
<td align="left">返回当事件被触发时，”CTRL” 键是否被按下。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-key-location.html" target="_blank" rel="noopener">Location</a></td>
<td align="left">返回按键在设备上的位置</td>
<td align="left">3</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-key-charcode.html" target="_blank" rel="noopener">charCode</a></td>
<td align="left">返回onkeypress事件触发键值的字母代码。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-key-key.html" target="_blank" rel="noopener">key</a></td>
<td align="left">在按下按键时返回按键的标识符。</td>
<td align="left">3</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-key-keycode.html" target="_blank" rel="noopener">keyCode</a></td>
<td align="left">返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-key-which.html" target="_blank" rel="noopener">which</a></td>
<td align="left">返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-metakey.html" target="_blank" rel="noopener">metaKey</a></td>
<td align="left">返回当事件被触发时，”meta” 键是否被按下。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-relatedtarget.html" target="_blank" rel="noopener">relatedTarget</a></td>
<td align="left">返回与事件的目标节点相关的节点。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-screenx.html" target="_blank" rel="noopener">screenX</a></td>
<td align="left">返回当某个事件被触发时，鼠标指针的水平坐标。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-screeny.html" target="_blank" rel="noopener">screenY</a></td>
<td align="left">返回当某个事件被触发时，鼠标指针的垂直坐标。</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left"><a href="https://www.runoob.com/jsref/event-shiftkey.html" target="_blank" rel="noopener">shiftKey</a></td>
<td align="left">返回当事件被触发时，”SHIFT” 键是否被按下。</td>
<td align="left">2</td>
</tr>
</tbody></table>
<h3 id="方法-2"><a href="#方法-2" class="headerlink" title="方法"></a>方法</h3><table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
<th align="left">W3C</th>
</tr>
</thead>
<tbody><tr>
<td align="left">initMouseEvent()</td>
<td align="left">初始化鼠标事件对象的值</td>
<td align="left">2</td>
</tr>
<tr>
<td align="left">initKeyboardEvent()</td>
<td align="left">初始化键盘事件对象的值</td>
<td align="left">3</td>
</tr>
</tbody></table>
<h3 id="去除默认事件和阻止冒泡"><a href="#去除默认事件和阻止冒泡" class="headerlink" title="去除默认事件和阻止冒泡"></a>去除默认事件和阻止冒泡</h3><h2 id="Console对象"><a href="#Console对象" class="headerlink" title="Console对象"></a>Console对象</h2><h3 id="输出"><a href="#输出" class="headerlink" title="输出"></a>输出</h3><table>
<thead>
<tr>
<th>console.info</th>
<th>控制台输出一条信息</th>
</tr>
</thead>
<tbody><tr>
<td>console.log</td>
<td>控制台输出一条信息</td>
</tr>
<tr>
<td>console.debug</td>
<td></td>
</tr>
<tr>
<td>console.warm</td>
<td>输出警告信息，信息最前面加一个黄色三角，表示警告</td>
</tr>
<tr>
<td>console.error</td>
<td>输出错误信息到控制台</td>
</tr>
<tr>
<td>console.table</td>
<td>以表格形式显示数据</td>
</tr>
</tbody></table>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.table() 用于在控制台输出表格信息</span><br><span class="line">第一个参数是必需的，且对象类型需要是对象或数组，对应的数据会填充到表格中。</span><br><span class="line"><span class="built_in">console</span>.table(tabledata, tablecolumns)</span><br><span class="line"><span class="comment">//一个值</span></span><br><span class="line">默认index值为<span class="number">0</span>~index<span class="number">-1</span></span><br><span class="line">使用数组作为输出的信息：</span><br><span class="line"><span class="built_in">console</span>.table([<span class="string">"Google"</span>, <span class="string">"Runoob"</span>, <span class="string">"Taobao"</span>]);</span><br><span class="line"></span><br><span class="line">自定义index值为name和site 使用对象作为输出的信息：</span><br><span class="line"><span class="built_in">console</span>.table(&#123; <span class="attr">name</span> : <span class="string">"菜鸟教程"</span>, <span class="attr">site</span> : <span class="string">"www.runoob.com"</span> &#125;);</span><br><span class="line"></span><br><span class="line">多列值  使用对象数组：</span><br><span class="line">默认值index</span><br><span class="line"><span class="keyword">var</span> site1 = &#123; <span class="attr">name</span> : <span class="string">"Runoob"</span>, <span class="attr">site</span> : <span class="string">"www.runoob.com"</span> &#125;</span><br><span class="line"><span class="keyword">var</span> site2 = &#123; <span class="attr">name</span> : <span class="string">"Google"</span>, <span class="attr">site</span> : <span class="string">"www.google.com"</span> &#125;</span><br><span class="line"><span class="keyword">var</span> site3 = &#123; <span class="attr">name</span> : <span class="string">"Taobao"</span>, <span class="attr">site</span> : <span class="string">"www.taobao.com"</span> &#125;</span><br><span class="line"><span class="built_in">console</span>.table([site1, site2, site3]);</span><br><span class="line"></span><br><span class="line">指定表格表头标题名，参数只能是对应的键名：</span><br><span class="line"><span class="keyword">var</span> site1 = &#123; <span class="attr">name</span> : <span class="string">"Runoob"</span>, <span class="attr">site</span> : <span class="string">"www.runoob.com"</span> &#125;</span><br><span class="line"><span class="keyword">var</span> site2 = &#123; <span class="attr">name</span> : <span class="string">"Google"</span>, <span class="attr">site</span> : <span class="string">"www.google.com"</span> &#125;</span><br><span class="line"><span class="keyword">var</span> site3 = &#123; <span class="attr">name</span> : <span class="string">"Taobao"</span>, <span class="attr">site</span> : <span class="string">"www.taobao.com"</span> &#125;</span><br><span class="line"><span class="built_in">console</span>.table([site1, site2, site3], [<span class="string">"site"</span>]);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//可以调换标题栏的列的位置</span></span><br><span class="line"><span class="keyword">var</span> site1 = &#123; <span class="attr">name</span> : <span class="string">"Runoob"</span>, <span class="attr">site</span> : <span class="string">"www.runoob.com"</span> &#125;</span><br><span class="line"><span class="keyword">var</span> site2 = &#123; <span class="attr">name</span> : <span class="string">"Google"</span>, <span class="attr">site</span> : <span class="string">"www.google.com"</span> &#125;</span><br><span class="line"><span class="keyword">var</span> site3 = &#123; <span class="attr">name</span> : <span class="string">"Taobao"</span>, <span class="attr">site</span> : <span class="string">"www.taobao.com"</span> &#125;</span><br><span class="line"><span class="built_in">console</span>.table([site1, site2, site3], [<span class="string">"name"</span>,<span class="string">"site"</span>]);</span><br><span class="line"><span class="built_in">console</span>.table([site1, site2, site3], [<span class="string">"site"</span>,<span class="string">"name"</span>]);</span><br><span class="line"></span><br><span class="line">参数	类型	描述</span><br><span class="line">tabledata	<span class="built_in">Array</span> 或 <span class="built_in">Object</span>	必需，填充到表格中的数据。 [] &#123; &#125;</span><br><span class="line">tablecolumns	<span class="built_in">Array</span>	可选，一个数组，表格标题栏的名称。[]</span><br></pre></td></tr></table></figure>

<h3 id="清除"><a href="#清除" class="headerlink" title="清除"></a>清除</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clear() <span class="comment">//清除控制台上的信息</span></span><br></pre></td></tr></table></figure>

<h3 id="计数、计时"><a href="#计数、计时" class="headerlink" title="计数、计时"></a>计数、计时</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line">time()  <span class="comment">//计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。 计时器的起始方法</span></span><br><span class="line"><span class="built_in">console</span>.time(label)</span><br><span class="line">参数说明</span><br><span class="line">参数	类型	描述</span><br><span class="line">label	<span class="built_in">String</span>	可选，用于给计算器设置标签。</span><br><span class="line">tablecolumns	<span class="built_in">Array</span>	可选，一个数组，表格标题栏的名称。</span><br><span class="line">label的作用是标记,计算</span><br><span class="line">timeEnd() <span class="comment">// 计时结束 计算器的结束方法</span></span><br><span class="line"><span class="built_in">console</span>.timeEnd(label)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.time();</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">  <span class="comment">// 代码部分</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.timeEnd();</span><br><span class="line"><span class="keyword">default</span>: <span class="number">0.009033203125</span>ms</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i;</span><br><span class="line"><span class="built_in">console</span>.time(<span class="string">"for 循环测试"</span>);</span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="number">100000</span>; i++) &#123;</span><br><span class="line">  <span class="comment">// 代码部分</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.timeEnd(<span class="string">"for 循环测试"</span>);</span><br><span class="line"> </span><br><span class="line">i = <span class="number">0</span>;</span><br><span class="line"><span class="built_in">console</span>.time(<span class="string">"while 循环测试"</span>);</span><br><span class="line"><span class="keyword">while</span> (i &lt; <span class="number">1000000</span>) &#123;</span><br><span class="line">  i++</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.timeEnd(<span class="string">"while 循环测试"</span>);</span><br><span class="line">VM1724:<span class="number">6</span> <span class="keyword">for</span> 循环测试: <span class="number">2.264892578125</span>ms</span><br><span class="line">VM1724:<span class="number">13</span> <span class="keyword">while</span> 循环测试: <span class="number">3.275146484375</span>ms</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">count() <span class="comment">//记录 count() 调用次数，一般用于计数。</span></span><br><span class="line"><span class="built_in">console</span>.count() 在调用时会将数字（调用次数）写入到控制台。</span><br><span class="line"><span class="built_in">console</span>.count() 方法可以添加标签。</span><br><span class="line">带标签</span><br><span class="line"><span class="built_in">console</span>.count(label)</span><br><span class="line"><span class="built_in">console</span>.count(<span class="string">"Runoob"</span>);</span><br><span class="line"><span class="built_in">console</span>.count(<span class="string">"Runoob"</span>);</span><br><span class="line"><span class="built_in">console</span>.count(<span class="string">"Runoob2"</span>);</span><br><span class="line">Runoob: <span class="number">1</span></span><br><span class="line">Runoob: <span class="number">2</span></span><br><span class="line">Runoob2: <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="number">2</span>; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.count(<span class="string">"r"</span>);</span><br><span class="line">    <span class="built_in">console</span>.count(<span class="string">"a"</span>);</span><br><span class="line">&#125;</span><br><span class="line">r: <span class="number">1</span></span><br><span class="line">a: <span class="number">1</span></span><br><span class="line">r: <span class="number">2</span></span><br><span class="line">a: <span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.count();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">default</span>: <span class="number">1</span></span><br><span class="line"><span class="keyword">default</span>: <span class="number">2</span></span><br><span class="line"><span class="keyword">default</span>: <span class="number">3</span></span><br><span class="line"></span><br><span class="line">参数	类型	描述</span><br><span class="line">label	<span class="built_in">String</span>	可选，如果有指定，则会在控制台上输出标签，该标签显示在调用次数之前。</span><br></pre></td></tr></table></figure>

<h3 id="信息分组-group"><a href="#信息分组-group" class="headerlink" title="信息分组  group()"></a>信息分组  <code>group()</code></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">group()	<span class="comment">//在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始，</span></span><br><span class="line">设置分组信息的起始位置，该位置之后的所有信息将写入分组。</span><br><span class="line"><span class="built_in">console</span>.group(label)</span><br><span class="line"></span><br><span class="line">为信息分组设置标签：</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"Runoob"</span>);</span><br><span class="line"><span class="built_in">console</span>.group(<span class="string">"RunoobLabel"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"我在指定标签分组里。"</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.groupEnd() 结束 跳出分组</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"Runoob"</span>);</span><br><span class="line"><span class="built_in">console</span>.group();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"Runoob，这个在分组里面。"</span>);</span><br><span class="line">VM2594:<span class="number">1</span> Runoob</span><br><span class="line">VM2594:<span class="number">2</span> <span class="built_in">console</span>.group</span><br><span class="line">VM2594:<span class="number">3</span> Runoob，这个在分组里面。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">groupCollapsed()	<span class="comment">//在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的。  隐藏分组信息。、折叠分组信息：</span></span><br><span class="line"><span class="built_in">console</span>.groupCollapsed(label)</span><br><span class="line"></span><br><span class="line">参数	类型	描述</span><br><span class="line">label	<span class="built_in">String</span>	可选，分组标签。</span><br><span class="line">为信息分组设置标签：</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"Runoob"</span>);</span><br><span class="line"><span class="built_in">console</span>.groupCollapsed(<span class="string">"RunoobLabel"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"我在指定标签分组里。"</span>);</span><br><span class="line"></span><br><span class="line">groupEnd()	<span class="comment">//设置当前信息分组结束 结束当前的分组。</span></span><br></pre></td></tr></table></figure>

<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">assert()	<span class="comment">//如果断言为 false，则在信息到控制台输出错误信息。</span></span><br><span class="line"><span class="built_in">console</span>.assert(<span class="built_in">document</span>.getElementById(<span class="string">"demo"</span>), <span class="string">"没有 ID 为 'demo' 的元素"</span>);</span><br><span class="line">Assertion failed: 没有 ID 为 <span class="string">'demo'</span> 的元素</span><br><span class="line"><span class="built_in">console</span>.assert() 方法在第一个参数为 <span class="literal">false</span> 的情况下会在控制台输出信息。</span><br><span class="line"><span class="built_in">console</span>.assert(expression, message)</span><br><span class="line">参数	类型	描述</span><br><span class="line">表达式	布尔值表达式	必需。布尔表达式，返回 <span class="literal">true</span> 或 <span class="literal">false</span>。</span><br><span class="line">信息	字符串或对象	必需。 要写到控制台的信息或对象。</span><br><span class="line"><span class="built_in">console</span>.assert(<span class="literal">true</span>,<span class="string">'这个的值是真'</span>)</span><br><span class="line"><span class="built_in">console</span>.assert(<span class="literal">false</span>,<span class="string">'这个的值是假'</span>)</span><br><span class="line">Assertion failed: 这个的值是假</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">trace()	<span class="comment">//显示当前执行的代码在堆栈中的调用路径。</span></span><br><span class="line"><span class="built_in">console</span>.trace(label)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  myOtherFunction();</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myOtherFunction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.trace();</span><br><span class="line">&#125;</span><br><span class="line">myFunction();</span><br><span class="line"><span class="built_in">console</span>.trace</span><br><span class="line">myOtherFunction @ VM2401:<span class="number">6</span></span><br><span class="line">myFunction @ VM2401:<span class="number">2</span></span><br><span class="line">(anonymous) @ VM2401:<span class="number">8</span></span><br></pre></td></tr></table></figure>

<h3 id="Console-log-添加样式-c-样式-s-信息"><a href="#Console-log-添加样式-c-样式-s-信息" class="headerlink" title="Console.log  添加样式 %c 样式 %s 信息"></a>Console.log  添加样式 <code>%c 样式 %s 信息</code></h3><p><a href="https://juejin.im/post/5bfd4e9de51d457edf4095c7" target="_blank" rel="noopener">https://juejin.im/post/5bfd4e9de51d457edf4095c7</a></p>
<figure class="highlight jsp"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.log(<span class="string">'%cHello'</span>, <span class="string">'color: green; background: yellow: font-size: 30px'</span>);</span><br></pre></td></tr></table></figure>

<p>log语句由三部分组成： <strong>%c</strong> + message + <strong>style</strong> 其中标 识符后紧跟message, 第二个参数为样式 最后输出的message的效果就如样式所定义的一致。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'%cconsole.log'</span>, <span class="string">'color: green;'</span>);</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">'%cconsole.info'</span>, <span class="string">'color: green;'</span>);</span><br><span class="line"><span class="built_in">console</span>.debug(<span class="string">'%cconsole.debug'</span>, <span class="string">'color: green;'</span>);</span><br><span class="line"><span class="built_in">console</span>.warn(<span class="string">'%cconsole.warn'</span>, <span class="string">'color: green;'</span>);</span><br><span class="line"><span class="built_in">console</span>.error(<span class="string">'%cconsole.error'</span>, <span class="string">'color: green;'</span>);</span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 将css样式内容放入数组</span></span><br><span class="line"><span class="keyword">const</span> styles = [</span><br><span class="line">  <span class="string">'color: green'</span>, </span><br><span class="line">  <span class="string">'background: yellow'</span>, </span><br><span class="line">  <span class="string">'font-size: 30px'</span>,</span><br><span class="line">  <span class="string">'border: 1px solid red'</span>,</span><br><span class="line">  <span class="string">'text-shadow: 2px 2px black'</span>,</span><br><span class="line">  <span class="string">'padding: 10px'</span>,</span><br><span class="line">].join(<span class="string">';'</span>); </span><br><span class="line"><span class="comment">// 2. 利用join方法讲各项以分号连接成一串字符串</span></span><br><span class="line"><span class="comment">// 3. 传入styles变量</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'%cHello There'</span>, styles);</span><br></pre></td></tr></table></figure>

<p>把需要输出的message也抽离出来，保存在变量中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> styles = [<span class="string">'color: green'</span>, <span class="string">'background: yellow'</span>].join(<span class="string">';'</span>);</span><br><span class="line"><span class="keyword">const</span> message = <span class="string">'Some Important Message Here'</span>;</span><br><span class="line"><span class="comment">// 3. 传入styles和message变量</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'%c%s'</span>, styles, message);</span><br></pre></td></tr></table></figure>






    </div>

    
    
    
        <div class="reward-container">
  <div></div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.jpg" alt="heweiliang 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.jpg" alt="heweiliang 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/04/13/%E5%89%8D%E7%AB%AF/%E5%AE%9E%E4%BE%8B/" rel="prev" title="前端/实例">
      <i class="fa fa-chevron-left"></i> 前端/实例
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/04/15/%E5%89%8D%E7%AB%AF/JavaScript/JavaScript/%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C%E5%AD%A6%E4%B9%A0/Browser%20%E5%AF%B9%E8%B1%A1/" rel="next" title="前端/JavaScript/JavaScript/参考手册学习/Browser 对象">
      前端/JavaScript/JavaScript/参考手册学习/Browser 对象 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    
  <div class="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC81MDY1MC8yNzEzMw=="></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-DOM"><span class="nav-number">1.</span> <span class="nav-text">HTML DOM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-文档对象模型"><span class="nav-number">1.1.</span> <span class="nav-text">DOM(文档对象模型)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-HTML"><span class="nav-number">1.2.</span> <span class="nav-text">DOM HTML</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-改变HTML输出流-document-write"><span class="nav-number">1.2.1.</span> <span class="nav-text">1. 改变HTML输出流 document.write()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-改变HTML内容-innerHTML-39-39"><span class="nav-number">1.2.2.</span> <span class="nav-text">2. 改变HTML内容 .innerHTML &#x3D; &#39;&#39;</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-改变HTML属性-解释-html标签中属性，这种方法更改不了自定义的属性-attribute-新属性"><span class="nav-number">1.2.3.</span> <span class="nav-text">3. 改变HTML属性 解释 html标签中属性，这种方法更改不了自定义的属性 .attribute&#x3D;新属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-CSS-Element-style-property-新样式"><span class="nav-number">1.3.</span> <span class="nav-text">DOM CSS Element.style.property&#x3D;新样式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#改变HTML样式"><span class="nav-number">1.3.1.</span> <span class="nav-text">改变HTML样式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-Event"><span class="nav-number">1.4.</span> <span class="nav-text">DOM Event</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-EventListener-addEventListener-和-removerEventListener"><span class="nav-number">1.5.</span> <span class="nav-text">DOM EventListener  addEventListener() 和 removerEventListener()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#addEventListener-方法"><span class="nav-number">1.6.</span> <span class="nav-text">addEventListener()方法</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#传递参数"><span class="nav-number">1.6.0.1.</span> <span class="nav-text">传递参数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#实例"><span class="nav-number">1.6.0.2.</span> <span class="nav-text">实例</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#removerEventListener-方法"><span class="nav-number">1.7.</span> <span class="nav-text">removerEventListener()方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件冒泡-false-里到外，默认冒泡-或事件捕获-外到里"><span class="nav-number">1.8.</span> <span class="nav-text">事件冒泡( false 里到外，默认冒泡)或事件捕获(外到里)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#阻止冒泡-e-stopPropagation-与-e-canceBubble-true"><span class="nav-number">1.9.</span> <span class="nav-text">阻止冒泡 e.stopPropagation() 与 e.canceBubble &#x3D; true</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#取消默认事件-e-preventDefault-e-returnValue-false"><span class="nav-number">1.10.</span> <span class="nav-text">取消默认事件 e.preventDefault() e.returnValue &#x3D; false</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用jQuery，既阻止默认行为又停止冒泡"><span class="nav-number">1.11.</span> <span class="nav-text">使用jQuery，既阻止默认行为又停止冒泡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-Element"><span class="nav-number">1.12.</span> <span class="nav-text">DOM Element</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JS-DOM-节点-增删改查"><span class="nav-number">1.13.</span> <span class="nav-text">JS DOM(节点) 增删改查</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#添加-创建-节点"><span class="nav-number">1.13.0.0.1.</span> <span class="nav-text">添加(创建)节点</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#删除节点"><span class="nav-number">1.13.0.0.2.</span> <span class="nav-text">删除节点</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#修改节点-操作节点"><span class="nav-number">1.13.0.0.3.</span> <span class="nav-text">修改节点(操作节点)</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#查找节点"><span class="nav-number">1.13.0.0.4.</span> <span class="nav-text">查找节点</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建-appendChild-添加新元素到尾部-和-insertBefore-将新元素添加到开始位置"><span class="nav-number">1.13.1.</span> <span class="nav-text">创建 appendChild()添加新元素到尾部 和 insertBefore()将新元素添加到开始位置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#删除-removeChild"><span class="nav-number">1.13.2.</span> <span class="nav-text">删除 removeChild()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#替换-replaceChild"><span class="nav-number">1.13.3.</span> <span class="nav-text">替换 replaceChild()</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTMLCollection-与-NodeList-的区别"><span class="nav-number">2.</span> <span class="nav-text">HTMLCollection 与 NodeList 的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTMLCollection对象-getElementsByTagName-方法-不是一个数组！"><span class="nav-number">2.1.</span> <span class="nav-text">HTMLCollection对象 getElementsByTagName()方法 不是一个数组！</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Nodelist对象-NodeList-对象是一个从文档中获取的节点列表-集合-。"><span class="nav-number">2.2.</span> <span class="nav-text">Nodelist对象 NodeList 对象是一个从文档中获取的节点列表 (集合) 。</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-DOM-事件"><span class="nav-number">3.</span> <span class="nav-text">HTML DOM 事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标事件-点击-click和dbclick-up和down-contextmenu-移动-mousemove-enter和leave-over和out"><span class="nav-number">3.1.</span> <span class="nav-text">鼠标事件 点击 click和dbclick up和down contextmenu 移动 mousemove enter和leave over和out</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#onmouseenter-和-onmouseover-的不同-都是鼠标进入"><span class="nav-number">3.1.1.</span> <span class="nav-text">onmouseenter 和 onmouseover 的不同 都是鼠标进入</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#onmouseout-与-onmouseleave-的区别-都是鼠标离开"><span class="nav-number">3.1.2.</span> <span class="nav-text">onmouseout 与 onmouseleave 的区别 都是鼠标离开</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#键盘事件"><span class="nav-number">3.2.</span> <span class="nav-text">键盘事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#框架-对象（Frame-Object）事件"><span class="nav-number">3.3.</span> <span class="nav-text">框架&#x2F;对象（Frame&#x2F;Object）事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单事件-blur-focus-in-out-input、reset、search、select、submit"><span class="nav-number">3.4.</span> <span class="nav-text">表单事件 blur focus&#x2F;in&#x2F;out input、reset、search、select、submit</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#剪切板事件"><span class="nav-number">3.5.</span> <span class="nav-text">剪切板事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#打印事件"><span class="nav-number">3.6.</span> <span class="nav-text">打印事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#拖动事件"><span class="nav-number">3.7.</span> <span class="nav-text">拖动事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多媒体（Media）事件"><span class="nav-number">3.8.</span> <span class="nav-text">多媒体（Media）事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动画事件"><span class="nav-number">3.9.</span> <span class="nav-text">动画事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#过渡事件"><span class="nav-number">3.10.</span> <span class="nav-text">过渡事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他事件"><span class="nav-number">3.11.</span> <span class="nav-text">其他事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件对象"><span class="nav-number">3.12.</span> <span class="nav-text">事件对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常量"><span class="nav-number">3.13.</span> <span class="nav-text">常量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#属性"><span class="nav-number">3.14.</span> <span class="nav-text">属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法"><span class="nav-number">3.15.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#目标事件对象"><span class="nav-number">3.16.</span> <span class="nav-text">目标事件对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法-1"><span class="nav-number">3.17.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件监听对象"><span class="nav-number">3.18.</span> <span class="nav-text">事件监听对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文档事件对象"><span class="nav-number">3.19.</span> <span class="nav-text">文档事件对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标-键盘事件对象"><span class="nav-number">3.20.</span> <span class="nav-text">鼠标&#x2F;键盘事件对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#属性-1"><span class="nav-number">3.21.</span> <span class="nav-text">属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法-2"><span class="nav-number">3.22.</span> <span class="nav-text">方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#去除默认事件和阻止冒泡"><span class="nav-number">3.23.</span> <span class="nav-text">去除默认事件和阻止冒泡</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Console对象"><span class="nav-number">4.</span> <span class="nav-text">Console对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#输出"><span class="nav-number">4.1.</span> <span class="nav-text">输出</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#清除"><span class="nav-number">4.2.</span> <span class="nav-text">清除</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计数、计时"><span class="nav-number">4.3.</span> <span class="nav-text">计数、计时</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#信息分组-group"><span class="nav-number">4.4.</span> <span class="nav-text">信息分组  group()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他"><span class="nav-number">4.5.</span> <span class="nav-text">其他</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Console-log-添加样式-c-样式-s-信息"><span class="nav-number">4.6.</span> <span class="nav-text">Console.log  添加样式 %c 样式 %s 信息</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script>
NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
});
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
